<template>
    <div class="passwordsSetting">
        <el-form :model="ruleForm2" :rules="rules2" class="demo-ruleForm" label-width="100px" ref="ruleForm2" style="height:100%;margin-top:100px;transform:translateX(-20%)" status-icon="">
            <el-form-item label="原密码：" prop="pass1" style="margin-top:20px;">
                <el-input v-model.number="ruleForm2.pass1">
                </el-input>
            </el-form-item>
            <el-form-item label="新密码：" prop="pass" style="margin-top:20px;">
                <el-input auto-complete="off" type="password" v-model="ruleForm2.pass">
                </el-input>
            </el-form-item>
            <el-form-item label="确认密码：" prop="checkPass" style="margin-top:20px;">
                <el-input auto-complete="off" type="password" v-model="ruleForm2.checkPass">
                </el-input>
            </el-form-item>

            <el-form-item style="margin-bottom:400px;">
                <el-button @click="submitForm('ruleForm2')" style="margin-top:30px;width:100%;height:43px;" type="primary">
                    确认修改
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
  data() {
    var pass1 = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("原密码不能为空"));
      }
      callback();
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm2.checkPass !== "") {
          this.$refs.ruleForm2.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm2.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm2: {
        pass1: "",
        checkPass: "",
        pass: ""
      },
      rules2: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        pass1: [{ validator: pass1, trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      let _this = this;
      _this.$refs[formName].validate(valid => {
        if (valid) {
          _this.$http
            .post("/api/api.php", {
              id: "reSettingPass",
              data: JSON.stringify(_this.ruleForm2)
            })
            .then(function(response) {
              _this.$message({
                type: response.data.status,
                message: response.data.msg
              });
              if (response.data.status === "success")
                setTimeout(function() {
                  window.location = "/mdd";
                }, 500);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang="scss">
.passwordsSetting {
  width: 400px;
  margin: 0 auto;
  /*border:1px solid #000;*/
}
</style>
